<template>
  <el-dialog
    title="分配权限"
    :visible="showDia"
  >
    <el-tree
      ref="tree"
      :data="rouleList"
      :props="{label:'name'}"
      check-strictly
      show-checkbox
      node-key="id"
    />
    <template v-slot:footer>
      <el-row type="flex" justify="center">
        <el-button size="small" @click="closeFn">取消</el-button>
        <el-button size="small" type="primary" @click="submit">确定</el-button>
      </el-row>
    </template>
  </el-dialog>
</template>
<script>
import { allPermission } from '@/api/permission'
import { listToTree } from '@/utils/index'
import { getRoleDetail, assignPrem } from '@/api/setting'
export default {
  props: {
    showDia: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      rouleList: [],
      checkList: [],
      id: ''
    }
  },
  async created() {
    const res = await allPermission()
    // console.log(res)
    this.rouleList = listToTree(res.data.data, '0')
  },
  methods: {
    async getRoleDetail(id) {
      this.id = id
      const res = await getRoleDetail(id)
      // console.log(res)
      this.checkList = res.data.data.permIds
      this.$refs.tree.setCheckedKeys(this.checkList)
    },
    closeFn() {

    },
    async submit() {
      this.checkList = this.$refs.tree.getCheckedKeys()
      await assignPrem({
        id: this.id,
        permIds: this.checkList
      })
      this.$emit('update:showDia', false)
    }
  }

}
</script>
<style>

</style>
